<template>
<div>
  <div>
    <el-input
        size="small"
        class="jobInput"
        placeholder="添加职位..."
        prefix-icon="el-icon-circle-plus-outline"
        @keydown.enter.native=""
        v-model="jobLevel.name">
    </el-input>
    <el-select v-model="jobLevel.titleLevel" size="small" style="margin: 0px 5px 0px 5px">
      <el-option
          v-for="item in titleLevels"
          :key="item"
          :label="item"
          :value="item">
      </el-option>
    </el-select>
    <el-button icon="el-icon-circle-plus-outline" type="danger" size="small" @click="addJobLevel">添加</el-button>
  </div>
  <div class="jobManageMain">
    <el-table
        stripe
        border
        :data="jobLevels"
        ref="multipleTable"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        style="width: 70%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="id"
          label="编号"
          width="60">
      </el-table-column>
      <el-table-column
          prop="createDate"
          label="创建时间"
          width="120">
      </el-table-column>
      <el-table-column
          prop="name"
          label="职称名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="titleLevel"
          label="职称等级"
          width="120">
      </el-table-column>
      <el-table-column
          prop="enabled"
          label="是否启用"
          width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.enabled" type="success">已启用</el-tag>
          <el-tag v-else type="info">未启用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="warning"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-button type="warning"
             size="small"
             :disabled="this.multipleSelection.length == 0"
             @click="deleteMany"
             style="margin-top: 5px">批量删除</el-button>
  <el-dialog
      title="编辑职称"
      :visible.sync="dialogVisible"
      width="30%">
    <div>
      <table>
        <tr>
          <td>
            <el-tag>编辑职称</el-tag>
          </td>
          <td>
            <el-input v-model="updateJob.name" size="small" class="updateJobInput"></el-input>
          </td>
        </tr>
        <tr>
          <td>
            <el-tag>编辑等级</el-tag>
          </td>
          <td>
            <el-select v-model="updateJob.titleLevel"
                       size="small"
                       class="updateJobInput">
              <el-option
                  v-for="item in titleLevels"
                  :key="item"
                  :label="item"
                  :value="item">
              </el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>
            <el-tag>是否启用</el-tag>
          </td>
          <td>
            <el-switch
                class="updateJobInput"
                v-model="updateJob.enabled"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="已启用"
                inactive-text="未启用">
            </el-switch>
          </td>
        </tr>
      </table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="doUpdate" size="small">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "JoblevelManage",
  data() {
    return {

      jobLevel: {
        name: '',
        titleLevel: ''
      },
      updateJob: {
        name: '',
        titleLevel: '',
        enabled: true
      },
      titleLevels: [
          '正高级',
          '副高级',
          '中级',
          '初级',
          '员级'
      ],
      jobLevels: [],
      dialogVisible: false,
      multipleSelection: [],
    }
  },
  mounted() {
    this.initJobLeves();
  },
  methods: {
    deleteMany() {
      this.$confirm('此操作将永久删除'+this.multipleSelection.length+'个职称, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = '?';
        this.multipleSelection.forEach(item => {
          ids += 'ids=' + item.id + '&';
        });
        this.deleteRequest('/system/basic/joblevel/'+ids).then(resp => {
          if (resp) {
            this.initJobLeves();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    doUpdate() {
      this.putRequest('/system/basic/joblevel/', this.updateJob).then(resp => {
        if (resp) {
          this.initJobLeves();
          this.dialogVisible = false;
        }
      });
    },
    addJobLevel() {
      if (this.jobLevel.name!='' && this.jobLevel.titleLevel!='') {
        this.postRequest('/system/basic/joblevel/', this.jobLevel).then(resp => {
          if (resp) {
            this.initJobLeves();
            this.jobLevel.name = '';
            this.jobLevel.titleLevel = '';
          }
        })
      } else {
        this.$message({
          type: 'error',
          message: '请填写完整职称名称与等级信息'
        });
      }
    },
    initJobLeves() {
      this.getRequest('/system/basic/joblevel/').then(resp => {
        if (resp) {
          this.jobLevels = resp.obj;
        }
      });
    },
    handleEdit(index, data) {
      Object.assign(this.updateJob, data);
      this.updateJob.createDate = '';
      this.dialogVisible = true;
    },
    handleDelete(index, data) {
      console.log(data);
      this.$confirm('此操作将永久删除'+data.name+', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/system/basic/joblevel/'+data.id).then(resp => {
          if (resp) {
            this.initJobLeves();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style scoped>
.jobInput {
  width: 300px;
}
.jobManageMain {
  margin-top: 10px;
}
.updateJobInput {
  width: 200px;
  margin-left: 10px;
}
</style>